<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js" type="text/javascript"></script>

</head>
<body>

<!--v-model-->
<div id="box">
    <input type="text" v-model="msg">
   <ul>
       <li v-for="value in arr">
           {{value}}
           {{$index}}
       </li>
   </ul>
<hr/>
    <ul>
        <li v-for="value in json">
            {{value}}
            {{$index}}
            {{$key}}
        </li>
    </ul>

    <hr/>
    <ul>
        <li v-for="(key,value) in json">
            {{value}}
            {{$index}}
            {{$key}}
        </li>
    </ul>

    <!--事件-->
    <div id="my">
        <!--v-on绑定事件，可以是click,mouseout,mousecenter等-->
        <input type="button" value="按钮" v-on:click = "show()">
    </div>
</div>
<script>
    var vm = new Vue({
        el:"#box", //el->element #box是选择器 id class p body
        data:{
            arr:['apple','orangle','banana'],
            json:{a:'apple',c:'ba'}
        },
        methods:{
            show:function(){
               this.arr.push('tomato');
            }
        }
    })
</script>
</body>
</html>